import { Component } from "react";
import { View, Swiper, SwiperItem } from "@tarojs/components";
import CustomNavBar from "../../components/CustomNavBar/index";
import NavBar from "../../components/NavBar/index";
import Home from "../home/index";
import Gallery from "../gallery/index";
import Mine from "../mine/index";
import "./index.scss";

export default class Index extends Component {
  state = {
    current: 0,
    isChanging: false
  };

  handleChange = (e: any) => {
    const index = e.detail.current;
    this.setState({ current: index, isChanging: false });
  };

  handleNavClick = (index: number) => {
    // 防抖：如果正在切换中，则忽略点击
    if (this.state.isChanging) {
      return;
    }
    
    // 如果点击的是当前页，也忽略
    if (index === this.state.current) {
      return;
    }
    
    this.setState({ current: index, isChanging: true });
  };

  render() {
    const { current } = this.state;
    const navItems = ["首页", "客片", "我的"];

    return (
      <View className="index-container">
        {/* 顶部导航栏 */}
        <CustomNavBar title="艺术工坊" />

        {/* Swiper */}
        <Swiper
          className="swiper-container"
          current={current}
          onChange={this.handleChange}
          indicatorDots={false}
        >
          <SwiperItem>
            {/* 首页 */}
            <Home />
          </SwiperItem>
          <SwiperItem>
            {/* 客片 */}
            <Gallery />
          </SwiperItem>
          <SwiperItem>
            {/* 我的 */}
            <Mine />
          </SwiperItem>
        </Swiper>

        {/* 底部导航栏 */}
        <NavBar
          items={navItems}
          current={current}
          onItemClick={this.handleNavClick}
        />
      </View>
    );
  }
}
